<template>
	<div class="roads-charts">
		<div class="title-second">各等级道路长度统计</div>
		<div id="roads-charts"></div>
		<div class="congestion-charts-right">
			<div v-for="(item, index) in labelList" :key="index" class="congestion-item">
				<div class="congestion-top">
					<div style="display: flex; align-items: center">
						<div class="sport" :style="{ backgroundColor: item.itemStyle.color }"> </div>
						{{ item.name }}道路总长度
					</div>
					<div class="symbol">{{ item.value }}km</div>
				</div>
				<!-- <div class="label">
          <span> {{ ((Number(item.value) / count) * 100).toFixed(2) }}% </span>
          <i :style="{ color: item.itemStyle.color }">{{ item.value }}KM</i>
        </div> -->
			</div>
		</div>
		<div class="line"></div>
		<div class="title-second">各等级道路建设率</div>
		<completion-rate ref="completionRef" style="width: 100%" class="mb2" />
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		getnum
	} from '@/utils/validate';
	import completionRate from './completionRate.vue';
	export default defineComponent({
		components: {
			completionRate
		},
		setup() {
			const echarts = inject('echarts');
			const state = reactive({
				startCharts: null,
				completionRef: null,
				list: [],
				labelList: [],
				count: 0,
				lastchart: null,
				colorList: ['#1657A8', '#A8F6D6', '#F4CE60', '#FFFF00', 'rgba(250,250,250,0.3)'],
				mTime: null,
				index: -1,
				dataStyle: {
					normal: {
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
					},
				},
				placeHolderStyle: {
					normal: {
						color: 'rgba(255,255,255,.1)',
						label: {
							show: false,
						},
						labelLine: {
							show: false,
						},
					},
					emphasis: {
						color: 'rgba(255,255,255,.1)',
					},
				},
			});

			const setData = (data, code) => {
				state.completionRef.setData();
				// code = 9317
				state.list = [];
				state.labelList = [];
				state.count = 0;
				data = [{
						name: '快速路',
						value: '64.8',
					},
					{
						name: '主干路',
						value: '1027.6',
					},
					{
						name: '次干路',
						value: '372.4',
					},
					{
						name: '支路',
						value: '412.2',
					},
				];
				if (data?.length) {
					data.map((i, index) => {
						let num = 0;
						// if (i.name == '主干路') {
						//   num = code == 9317 ? getnum(i.v) * 100000 : getnum(i.v);
						// } else {
						//   num = getnum(i.v);
						// }
						const num1 = parseFloat(i.value);
						state.count = num1 //+= Number(num1);
						state.labelList.push({
							name: i.name,
							value: num1,
							itemStyle: {
								color: state.colorList[index],
							},
						});
						// state.list.push({
						//   name: i.name,
						//   type: 'pie',
						//   clockWise: true, //是否顺时针显示
						//   startAngle: 90, //起始角度
						//   hoverAnimation: false,
						//   clockwise: false,
						//   radius: [50 + index * 10 + '%', 60 + index * 10 + '%'],
						//   itemStyle: state.dataStyle,

						//   data: [
						//     {
						//       value: parseFloat(num1).toFixed(1), //parseFloat(state.count - num1).toFixed(1),
						//       name: i.name,
						//       itemStyle: {
						//         normal: {
						//           color: state.colorList[index],
						//         },
						//       },
						//     },

						//     {
						//       value: state.count,
						//       name: '总数',
						//       tooltip: {
						//         show: false,
						//       },
						//       itemStyle: state.placeHolderStyle,
						//     },
						//   ],
						// });
					});

					state.list.push({
						// name: i.name,
						name: "",
						type: 'pie',
						clockWise: true, //是否顺时针显示
						startAngle: 90, //起始角度
						hoverAnimation: false,
						clockwise: false,
						// radius: [50 + index * 10 + '%', 60 + index * 10 + '%'],
						radius: ['80%', '50%'],
						// center:["25%","65%"],
						itemStyle: state.dataStyle,

						data: data,

					});
				}
				setOptions();
			};
			const setOptions = () => {
				if (
					//判断是否存在echarts实例化对象,如果存在则销毁
					state.lastchart != null &&
					state.lastchart != '' &&
					state.lastchart != undefined
				) {
					state.lastchart.dispose();
				}
				state.lastchart = echarts.init(document.getElementById('roads-charts'));
				let option = {
					// color:state.colorList,
					tooltip: {
						show: true,
						backgroundColor: 'rgba(15, 168, 207, 0.9)',
						borderColor: 'white',
						textStyle: {
							color: 'white', //设置文字颜色
						},
						formatter: `{b} : {c}km`,
					},
					title: {
						text: '各类型道路\n占比',
						left: 'center',
						top: 'center',
						textStyle: {
							color: '#fff',
							fontSize: 12,
							align: 'center',
						},
					},
					series: state.list,
				};
				state.lastchart.setOption(option);
			};
			return {
				...toRefs(state),
				setData,
				// jisuan(val) {
				//     return parseFloat(val).toFixed(1);
				// },
			};
		},
	});
</script>
<style lang="less" scoped>
	.roads-charts {
		height: 48.5vh;
		display: flex;
		// align-items: center;
		background: url('@/assets/images/home/bg-youshang.png') no-repeat;
		background-size: 100% 100%;
		margin-top: -8px;
		flex-wrap: wrap;

		.title-second {
			width: 100%;
			font-size: 16px;
			padding-top: 1.0416vw;
		}

		#roads-charts {
			width: 35%;
			margin: 0 2.5%;
			height: 15vh;
			margin-top: 3vh;
		}

		.congestion-charts-right {
			flex: 1;
			flex-shrink: 0;
			padding-top: 1.4416vw;
			padding-left: 0.5208vw;
		}

		.congestion-item {
			color: white;
			font-size: 0.7vw;
			margin: 0.6vw 0;
			text-align: left;

			.congestion-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
			}

			.sport {
				width: 0.6vw;
				height: 0.6vw;
				border-radius: 50%;
				border: 1px solid white;
				margin-right: 4px;
			}

			.label {
				color: #fff;
				font-size: 0.83333vw;
				font-weight: 600;
				padding-left: 1vw;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 10.8125vw;
				font-weight: bold;
				text-shadow: #52a4d2 1px 0 0, #52a4d2 0 1px 0, #52a4d2 -1px 0 0, #52a4d2 0 -1px 0;
			}

			.symbol {
				font-size: 14px;
				font-weight: 400;
			}

			i {
				// text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
				font-style: normal;
				opacity: 0.85;
			}
		}

		.line {
			width: 100%;
			border-top: 1px dotted white;
			margin-top: 0.52083vw;
		}
	}
</style>